<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Taichi.js | ${{ shader_name }}</title>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"/>
        <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.35.0/codemirror.min.css" rel="stylesheet">

        <style>
        .canvas {
            align: center;
        }
        </style>
    </head>

    <body class="mdui-theme-layout-auto mdui-theme-accent-pink mdui-theme-primary-indigo">
        <div class="mdui-toolbar mdui-color-theme">
            <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Menu'}" mdui-menu="{target: '#toolbar-attr'}"><i class="mdui-icon material-icons">menu</i></a>
            <ul class="mdui-menu mdui-menu-cascade" id="toolbar-attr">
                <li class="mdui-menu-item">

                <li class="mdui-menu-item">
                <a href="https://github.com/taichi-dev/taichi.js" class="mdui-ripple">Taichi.js on GitHub</a>
                </li>

                <li class="mdui-menu-item">
                <a href="https://taichi.readthedocs.io/" class="mdui-ripple">Taichi documentation</a>
                </li>

                <li class="mdui-menu-item">
                <a href="https://github.com/taichi-dev/taichi/tree/master/examples" class="mdui-ripple">Taichi examples</a>
                </li>

                <li class="mdui-divider"></li>

                <li class="mdui-menu-item">
                <a href="https://github.com/taichi-dev/taichi.js/issues/new" class="mdui-ripple">Feedback</a>
                </li>

                <li class="mdui-menu-item">
                <a href="/help">Help</a>
                </li>
            </ul>

            <span class="mdui-typo-title">Taichi.js</span>
            <div class="mdui-toolbar-spacer"></div>
            <a href="/new" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons" mdui-tooltip="{content: 'New'}">add_box</i></a>
            <a href="/" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons" mdui-tooltip="{content: 'Home'}">home</i></a>
            <a href="/help" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons" mdui-tooltip="{content: 'Help'}">help_outline</i></a>
        </div>

        <div class="mdui-container mdui-m-t-2">

            <div class="mdui-row">
                <div class="mdui-card mdui-col-xs-6 mdui-m-l-1 mdui-m-r-1">
                      <div class="mdui-img-fluid mdui-img-rounded mdui-center mdui-valign mdui-m-t-1" class="mdui-card-media">
                        <textarea rows="24" placeholder="Code here" id="text-code">
import taichi as ti
import numpy as np
import hub

img = ti.Vector.field(3, float, (512, 512))

@hub.kernel
def render(t: float):
    for i, j in img:
        a = ti.Vector([i / 512, j / 512 + 2, i / 512 + 4])
        img[i, j] = ti.cos(a + t) * 0.5 + 0.5

hub.bind_image(img)
</textarea>
                    </div>

                    <div class="mdui-card-actions mdui-m-t-1 mdui-m-b-1">
                        <button class="mdui-btn mdui-btn-raised mdui-icon-left mdui-hoverable mdui-ripple mdui-color-theme-accent mdui-float-left" mdui-tooltip="{content: 'Launch shader'}" id="button-run"><i class="mdui-icon material-icons">play_arrow</i> Run</button>
                        <div class="mdui-chip mdui-float-left mdui-valign">
                            <span class="mdui-chip-title" mdui-tooltip="{content: 'Shader status'}" id="label-status">idle</span>
                        </div>
                        <button class="mdui-btn mdui-btn-icon mdui-hoverable mdui-ripple mdui-float-right" mdui-tooltip="{content: 'Shader settings..'}" mdui-dialog="{target: '#dialog-settings'}"><i class="mdui-icon material-icons">settings</i></button>
                        <button class="mdui-btn mdui-btn-icon mdui-hoverable mdui-ripple mdui-float-right" mdui-tooltip="{content: 'Load a template..'}" mdui-dialog="{target: '#dialog-load'}"><i class="mdui-icon material-icons">folder_open</i></button>
                        <button class="mdui-btn mdui-btn-icon mdui-hoverable mdui-ripple mdui-float-right" mdui-tooltip="{content: 'Save this shader'}" id="button-save"><i class="mdui-icon material-icons">save</i></button>
                        <div class="mdui-chip mdui-float-right mdui-valign">
                            <span class="mdui-chip-title" mdui-tooltip="{content: 'Save/load status'}" id="label-savestatus">unsaved</span>
                        </div>
                    </div>
                </div>

                <div class="mdui-card mdui-col-xs-5 mdui-m-l-1 mdui-m-r-1">
                  <div class="mdui-card-media">
                    <canvas class="mdui-img-fluid mdui-img-rounded mdui-center mdui-valign mdui-m-t-1" id="canvas" height="512" width="512">HTML5 is not supported on your browser :(</canvas>
                  </div>
                  <div class="mdui-card-actions mdui-m-t-1 mdui-m-b-1">
                    <button class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-hoverable mdui-ripple mdui-valign mdui-color-theme mdui-float-left" mdui-tooltip="{content: 'Pause/Start'}" id="button-pause"><i class="mdui-icon material-icons" id="icon-pause">pause</i></button>
                    <div class="mdui-chip mdui-float-left mdui-valign mdui-m-l-1">
                        <span class="mdui-chip-title" mdui-tooltip="{content: 'Frames per second'}" id="label-fps">-- FPS</span>
                    </div>
                    <button class="mdui-btn mdui-btn-icon mdui-ripple mdui-float-right" mdui-tooltip="{content: 'Reset simulation'}" id="button-reset"><i class="mdui-icon material-icons">refresh</i></button>
                  </div>
                </div>

                <!--div class="mdui-col-xs-6 mdui-m-t-1 mdui-m-l-1 mdui-m-r-1">
                    <div class="mdui-panel mdui-panel-popout" mdui-panel>
                        <div class="mdui-panel-item">
                            <div class="mdui-panel-item-header"><i class="mdui-icon material-icons">settings</i> &nbsp; Advanced settings...</div>
                            <div class="mdui-panel-item-body">
                                <div class="mdui-textfield mdui-textfield-floating-label">
                                    <label class="mdui-textfield-label">Server address</label>
                                    <input class="mdui-textfield-input" type="text" id="text-server-addr"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div-->
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label">
                <textarea class="mdui-textfield-input mdui-img-rounded" rows="25" placeholder="Output will be displayed here" id="text-output" disabled></textarea>
            </div>
        </div>

        <div class="mdui-dialog" id="dialog-load">
            <div class="mdui-dialog-title">Load a template</div>
            <div class="mdui-dialog-content">
            <p>What's the shader's ID you'd like to load as a template?</p>
            <div class="mdui-textfield">
                <input class="mdui-textfield-input" type="text" placeholder="Shader ID" id="text-load-name"/>
            </div>
            </div>
            <div class="mdui-dialog-actions">
                <button class="mdui-btn mdui-ripple" mdui-dialog-confirm id="button-load">OK</button>
                <button class="mdui-btn mdui-ripple" mdui-dialog-cancel>Cancel</button>
            </div>
        </div>

        <script src="//cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.35.0/codemirror.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.35.0/mode/python/python.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.35.0/addon/selection/active-line.min.js"></script>

        <script src="/taichi.js"></script>
        <script src="/hubview.js"></script>

        <script>
        var editor = CodeMirror.fromTextArea(document.getElementById('text-code'), {
            lineNumbers: true,
            indentUnit: 4,
            styleActiveLine: true,
            matchBrakets: true,
            mode: 'python',
            lineWrapping: false,
            theme: 'default',
            foldGutter: true,
            gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        });

        editor.setOption('extraKeys', {
            Tab: function(cm) {
                var spaces = Array(cm.getOption('identUnit') + 1).join(' ');
                cm.replaceSelection(spaces);
            },
        });

        var taichihub = {};

        $(function() {
            editor.setSize('100%', 512);

            var canvas = $('#canvas');
            var shaderName = {{ shader_name|tojson }};
            taichihub = new HubView(canvas, editor, shaderName);
            taichihub.bindButtons();
        });
        </script>
    </body>
</html>
